<template>
  <div>
    <NavType />
    <div class="main">
      <div class="py-container">
        <SearchTag 
          :queryTag="queryTag"
          :paramsTag="paramsTag"
          :trademark="searchParams.trademark"
          :props="searchParams.props"
          @deleteQueryTag='deleteQueryTag'
          @deleteParamsTag='deleteParamsTag'
          @deleteTrademarkTag='deleteTrademarkTag'
          @deletePropTag='deletePropTag'
         />
        <SearchSelector
          @trademarkParams = trademarkParams
          @arrritemParams = arrritemParams
         />
        <SearchDetails 
          :order="searchParams.order" 
          @changeOrder='changeOrder'
          :pageNo="searchParams.pageNo"
          @changePageNo=changePageNo
        />
        <SearchHot />
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import SearchTag from './components/SearchTag'
import SearchSelector from './components/SearchSelector'
import SearchDetails from './components/SearchDetails'
import SearchHot from './components/SearchHot'

export default {
  components: {
    SearchTag,
    SearchSelector,
    SearchDetails,
    SearchHot
  },
  data() {
    return {
      // 定义变量1  定义一个请求的params参数
      searchParams: {
        category1Id: '',
        category2Id: '',
        category3Id: '',
        categoryName: '',
        keyword: '',
        order: '1:desc',
        pageNo: 1,
        pageSize: 10,
        props: [],
        trademark: ''
      }
    }
  },
  beforeMount() {
    // 初始化1 获取之前的query和params参数
    this.initParams()
  },
  mounted() {
    //初始化2  发起请求 请求搜索列表 并携带对应的params参数
    this.getSearchList(this.searchParams);
  },
  methods: {
    // 方法1  请求列表数据
    ...mapActions("search", ['getSearchList']),
    // 方法2 请求初始参数 
    initParams(){
      // 获取query参数
      const {
        categoryName = '',
        category1Id = '',
        category2Id = '',
        category3Id = ''
      } = this.$route.query
      // 获取params参数
      const { keyword = '' } = this.$route.params
      // 合并参数
      this.searchParams = {
        ...this.searchParams,
        categoryName,
        category2Id,
        category3Id,
        category1Id,
        keyword
      }
    },
    // 方法3 点击品牌
    trademarkParams(val){
      this.searchParams.trademark = `${val.tmId}:${val.tmName}`
      // 请求数据
      this.getSearchList(this.searchParams);
    },
    // 方法4 点击属性
    arrritemParams(attr){
      // 对参数解构
      const { attritem , attrId ,attrName} = attr
      this.searchParams.props.push(`${attrId}:${attritem}:${attrName}`)
      this.getSearchList(this.searchParams);
      
    },
    // 方法5 改变排序
    changeOrder(type){
      // 获取旧的排序方式
      const oldOrder = this.searchParams.order.split(":")
      // 声明新的排序方式
      let newOrder = ''
      // 判断当前是否是重复点击 一个排序类型
      if(oldOrder[0]===type){
        // 如果是一个类型 排序顺序取反
        newOrder = type + ':' + (oldOrder[1] === 'desc' ? 'asc' : 'desc')
      }else{
        newOrder = type + ":" + 'asc'
      }
      this.searchParams.order = newOrder
      this.getSearchList(this.searchParams);
    },
    // 方法6 移除带query参数的 tag
    deleteQueryTag(){
      this.searchParams = {
        ...this.searchParams,
        category1Id: '',
        category2Id: '',
        category3Id: '',
        categoryName: '',
      }
      const params = this.$route.params
      this.$router.push({
        name:'search',
        params
      })
    },
    // 方法7 移除带params参数的 tag
    deleteParamsTag(){
      this.searchParams = {
        ...this.searchParams,
        keyword:''
      }

      // 组件通信 通知hearder组件 清空搜索关键词 (清空params参数)
      this.$bus.$emit('clearKeyWord')



      const query = this.$route.query
      this.$router.push({
        name:'search',
        query
      })
    },
    // 方法8 移除品牌的 tag
    deleteTrademarkTag(){
      this.searchParams = {
        ...this.searchParams,
        trademark:''
      }
      // 重新发起请求
      this.getSearchList(this.searchParams)
    },
    // 方法9 移除属性tag
    deletePropTag(index){
      this.searchParams.props.splice(index,1)
      // 重新发请求
      this.getSearchList(this.searchParams)
    },
    // 方法10 更改页码
    changePageNo(page){
      this.searchParams.pageNo = page
      this.getSearchList(this.searchParams)
    }
  },
  computed: {
    // 计算属性1 带query参数的tag
    queryTag() {
      return this.$route.query.categoryName || ''
    },
    // 计算属性2  带params参数的tag
    paramsTag() {
      return this.$route.params.keyword || ''
    }
  },
  watch:{
    // 监听路由 路由改变 则重新请求数据
    $route(){
      // 先请求之前的参数
      this.initParams()
      this.getSearchList(this.searchParams);
    }
  }
}
</script>

<style scoped lang="less">
.main {
  margin: 10px 0;
  .py-container {
    width: 1200px;
    margin: 0 auto;
  }
}
</style>
